<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>03jQuery和js入口函数的区别</title>
        <script src="http://code.jquery.com/jquery-1.12.4.js" 
        integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>
        <script>
            //1.通过原生的JS入口函数可以拿到DOM元素
            /*
            window.onload=function(ev){
                var img=document.getElementsByTagName("img")[0];
                console.log(img);
                //2.通过原生的JS入口函数可以拿到DOM元素的宽高
                var width=getComputedStyle(img).width;
                console.log("onload:"+width);
            }
            */

            /*
            原生JS和jQuery入口函数的加载模式不同
            原生JS会等DOM元素加载完毕，并且图片也加载完毕后再执行
            jQuery只会等DOM元素加载完毕就直接执行
            */
            //1.通过jQuery入口函数可以拿到DOM元素
            /*
            $(document).ready(function(){
                var $img=$("img")[0];
                console.log($img);
                //2.通过jQuery入口函数不以拿到DOM元素的宽高
                var $width=$img.width;
                console.log("ready:"+$width);
            });
            */

            /*
            1.原生的JS如果编写了多个入口函数，后面编写的会覆盖前面编写的
            */
            // window.onload=function(){
            //     alert("hello world");
            // }
            // window.onload=function(){
            //     alert("hello world 2");
            // }

             /*
            1.jQuery如果编写了多个入口函数，后面编写的不会覆盖前面编写的
            */
            // $(document).ready(function (param) {
            //     alert("hello jquery");
            //   });
            // $(document).ready(function (param) {
            //     alert("hello jquery2");
            //   });
        </script>
    </head>
    <body>
        <img src="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_PclogoS_8whnvm25&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs" alt="">
    </body>
</html>